<template>
  <el-card class="login-card">
    <div slot="header" class="clearfix">
      <span>登录</span>
    </div>
    <el-form
      ref="loginFormRef"
      :rules="rules"
      label-position="right"
      :model="loginForm"
      label-width="80px"
    >
      <el-form-item label="账号" prop="loginAccount">
        <el-input
          prefix-icon="el-icon-user"
          v-model="loginForm.loginAccount"
          placeholder="请输入邮箱/手机/昵称"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          prefix-icon="el-icon-s-goods"
          placeholder="请输入密码"
          v-model="loginForm.password"
          show-password
          @keyup.enter.native="btnLogin"
        ></el-input>
      </el-form-item>
      <el-form-item prop="rem">
        <el-checkbox
          label="记住密码"
          v-model="loginForm.rem"
          name="type"
        ></el-checkbox>
        <el-link
          class="link-class"
          :underline="false"
          type="primary"
          @click="btnForget"
        >
          忘记密码？点此找回
        </el-link>
      </el-form-item>
      <el-button
        type="primary"
        class="login-btn"
        round
        :loading="isLoading"
        @click="btnLogin"
        >登录</el-button
      >
      <el-button class="reset-btn" round @click="btnReset">重置</el-button>
    </el-form>
  </el-card>
</template>

<script>
import { api_login } from '../api/admin'

export default {
  data() {
    return {
      isLoading: false,
      loginForm: {
        loginAccount: '',
        password: '',
        rem: false,
      },
      rules: {
        loginAccount: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 4, max: 20, message: '长度在4到20个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 20, message: '长度在4到20个字符', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    btnReset() {
      //获取表单对象
      //this.$refs.loginFormRef
      //通过表单对象执行重置方法
      this.$refs.loginFormRef.resetFields()
    },
    btnLogin() {
      this.isLoading = true
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) {
          return false
        }
        //await 必须在async修饰的方法或函数里
        const { data: res } = await api_login(
          this.loginForm.loginAccount,
          this.loginForm.password
        )
        this.isLoading = false
        const data = res.data
        if(!res.success){
          this.$message.error(res.msg)
          return
        }
        if(data.user.roleId==null || data.user.roleId==3){//角色不为空且为普通用户直接中断函数
          this.$message.error("权限不足！")
          return
        }
        if (res.code != 200) {
          this.$message.error(res.msg)
          return true
        }
        const token = data.tokenHead + data.token
        //token保存到sessionStorage(属于浏览器)
        window.sessionStorage.setItem('token', token) //会话结束后自动消除
        window.sessionStorage.setItem('userId', data.user.id)
        //保存用户信息到vuex的store
        //记住密码存到cookie
        if (this.loginForm.rem) {
          this.$cookies.set(
            'store-loginAccount',
            this.loginForm.loginAccount,
            '7D'
          )
          this.$cookies.set('store-password', this.loginForm.password, '7D')
        } else {
          this.$cookies.remove('store-loginAccount')
          this.$cookies.remove('store-password')
        }
        this.$message({
          message: res.msg,
          type: 'success',
        })
        //编程式路由跳转 不推荐异步跳转
        await this.$router.replace('/home')
      })
    },
    btnRegister() {
      console.log('btnRegister')
    },
    btnForget() {
      console.log('btnForget')
      this.$router.push('/forget')
    },
  },
  created() {
    //获取cookies的值
    this.loginForm.loginAccount = this.$cookies.get('loginAccount')
    this.loginForm.password = this.$cookies.get('password')
  },
}
</script>

<style scoped>
.login-card {
  width: 480px;
  margin: auto;
  transform: translateY(80%);
}
.login-btn {
  width: 48%;
}
.reset-btn {
  width: 48%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.clearfix {
  text-align: center;
  font-family: '幼圆';
  font-size: 25px;
}
.link-class {
  margin-left: 80px;
}
</style>
